
;(function(exports){
	var KeyBoard = function(input, options){
		var body = document.getElementsByTagName('body')[0];
		var DIV_ID = options && options.divId || '__w_l_h_v_c_z_e_r_o_divid';
		
		if(document.getElementById(DIV_ID)){
			body.removeChild(document.getElementById(DIV_ID));
		}
		
		this.input = input;
		this.el = document.createElement('div');
		
		var self = this;
		var zIndex = options && options.zIndex || 1000;
		var width = options && options.width || '100%';
		var height = options && options.height || '48%';
		var fontSize = options && options.fontSize || '15px';
		var backgroundColor = options && options.backgroundColor || '#fff';
		var TABLE_ID = options && options.table_id || 'table_0909099';
		var mobile = typeof orientation !== 'undefined';
		this.el.id = DIV_ID;
		this.el.style.position = 'absolute';
		this.el.style.left = 0;
		this.el.style.right = 0;
		this.el.style.bottom = 0;
		this.el.style.zIndex = zIndex;
		this.el.style.width = width;
		this.el.style.height = height;
		this.el.style.backgroundColor = backgroundColor;
		
		//样式
		var cssStr = '<style type="text/css">';
		cssStr += '#' + TABLE_ID + '{text-align:center;width:100%;height:92%;border-top:1px solid #CECDCE;background-color:#FFF;}';
		cssStr += '#' + TABLE_ID + ' td{width:25%;border:1px solid #ddd;border-right:0;border-top:0;}';
			//cssStr += '#' + TABLE_ID + ' td:hover{background-color:#1FB9FF;color:#FFF;}';
		if(!mobile){
			cssStr += '#' + TABLE_ID + ' td:hover{background-color:#1FB9FF;color:#FFF;}';
		}
		cssStr += '</style>';
		
		//Button
		var btnStr = '<div style="width:100%;height:8%;font-size:14px;text-align:center;color:#CCC;background-color:#F8F8F8;';
		//btnStr += 'float:right;margin-right:5px;text-align:center;color:#fff;';
		btnStr += 'cursor:pointer;">华意科技提供技术支持</div>';
		
		//table
		var tableStr = '<table id="' + TABLE_ID + '" border="0" cellspacing="0" cellpadding="0">';
			tableStr += '<tr><td>1</td><td>2</td><td>3</td><td id="dele" rowspan="2">删除</td></tr>';
			tableStr += '<tr><td>4</td><td>5</td><td>6</td></tr>';
			tableStr += '<tr><td>7</td><td>8</td><td>9</td><td rowspan="2" bgcolor="#06BF04" style="color:#fff">支付</td></tr>';
		
			tableStr += '<td>隐藏</td><td>0</td><td>.</td></tr>';
			tableStr += '</table>';
		this.el.innerHTML = cssStr +btnStr+tableStr;
		
		function addEvent(e){
			var ev = e || window.event;
			var clickEl = ev.element || ev.target;
			var value = clickEl.textContent || clickEl.innerText;
			if(clickEl.tagName.toLocaleLowerCase() === 'td' && value !== "删除" && value !== "支付" && value !== "隐藏"){
				if(self.input){
					var len=document.getElementById("price").value.length;
					if(len<6){
					self.input.value += value;}
					
					
					}
			
			}else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "隐藏"){
				
				body.removeChild(self.el);
			}
			else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "支付"){
				zf();
				body.removeChild(self.el);
			}else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "删除"){
		       // alert(this.el.ontouchend);
				var num = self.input.value;
				if(num){
					var newNum = num.substr(0, num.length - 1);
					self.input.value = newNum;
				}
				
			}
		}
		
		
		if(mobile){
			
			this.el.ontouchstart = addEvent;
		//	this.el.ontouchevent = addEcent;
		}else{
			this.el.onclick = addEvent;
		}
		
		body.appendChild(this.el);
	

	
		$("#"+TABLE_ID+" td").bind("touchstart",function(){
			 $(this).css({"background":"#ccc"});	 		
		}).bind("touchend",function(){
			var _this=$(this);
			setTimeout(function(){
				_this.css({"background":"none"});	 
			},100);
		});
	}
	
	exports.KeyBoard = KeyBoard;

})(window);
